import { Modal, Form, Input, Button, message } from 'antd';
import { connect } from 'react-redux';
import { useEffect } from 'react';
import { visible, loading, testing, setForm } from '../../redux/actions/connection';
import { load, save } from '../../redux/actions/main-left-tree';
import request from '../../request';

function Connection(props) {
    const [form] = Form.useForm();
    const onOk = _ => form.validateFields().then(_ => form.submit());
    const onCancel = _ => props.visible(false);
    const onConnect = _ => {
        form.validateFields().then(_ => {
            let ds = form.getFieldsValue();
            props.setForm(ds);
            props.loading(true);
            request('HelloDB', ds)
                .then(x => x.success ? message.success('连接成功！') : _)
                .finally(_ => props.loading(false));
        });
    };
    const onFinish = vs => {
        vs.id = props.form.id;
        props.loading(true);
        request('SaveConnect', vs).then(x => {
            if (x.success) {
                props.save(x.data);
                message.success(vs.id ? '修改连接成功！' : '添加连接成功！');
            }
        }).finally(_ => {
            props.loading(false);
            props.visible(false);
        });
    };
    useEffect(_ => form.setFieldsValue(props.form));

    return <Modal
        title={ props.form.id ? 'RTDB - 编辑连接' : 'RTDB - 新建连接' }
        cancelText="取消"
        okText="确定"
        centered
        closable={false}
        maskClosable={false}
        forceRender={true}
        visible={props.isVisible}
        onOk={onOk}
        onCancel={_ => props.visible(false)}
        footer={[
            <Button key="connect" loading={props.isLoading} onClick={onConnect}>测试连接</Button>,
            <Button key="cancel" onClick={onCancel}>取消</Button>,
            <Button key="ok" type="primary" loading={props.isLoading} onClick={onOk}>确定</Button>
        ]}>

        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <Form.Item label="连接名：" name="link_name" rules={[{ required: true, message: '请输入连接名' }]}>
                <Input maxLength="10" />
            </Form.Item>
            <Form.Item label="主机：" name="host" rules={[{ required: true, message: '请输入主机' }]}>
                <Input maxLength="20" />
            </Form.Item>
            <Form.Item label="端口：" name="port"
                labelCol={{ span: 4 }} wrapperCol={{ span: 4 }}
                rules={[{ required: true, message: '请输入端口' }, { type: 'integer', message: '请输入数字', transform: x => Number(x) }]}>

                <Input maxLength="4" />
            </Form.Item>
            <Form.Item label="Token：" name="token" rules={[{ required: true, message: '请输入Token' }]}>
                <Input maxLength="100" />
            </Form.Item>
        </Form>
    </Modal>
}

export default connect(
    state => ({ isVisible: state.connection.isVisible, isLoading: state.connection.isLoading, form: state.connection.form }),
    { visible, loading, load, testing, save, setForm }
)(Connection);